<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息接口日志查看器</title>
    <style>
        body {
            font-family: 'Courier New', monospace;
            margin: 0;
            padding: 20px;
            background-color: #1e1e1e;
            color: #d4d4d4;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        h1 {
            color: #569cd6;
            text-align: center;
            margin-bottom: 30px;
        }
        .controls {
            background: #2d2d30;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }
        .control-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        label {
            color: #9cdcfe;
            font-weight: bold;
        }
        input, select, button {
            padding: 8px 12px;
            border: 1px solid #3c3c3c;
            border-radius: 4px;
            background: #1e1e1e;
            color: #d4d4d4;
            font-family: inherit;
        }
        button {
            background: #007acc;
            color: white;
            border: none;
            cursor: pointer;
            transition: background 0.3s;
        }
        button:hover {
            background: #005a9e;
        }
        button:disabled {
            background: #555;
            cursor: not-allowed;
        }
        .log-container {
            background: #2d2d30;
            border-radius: 8px;
            padding: 20px;
            max-height: 600px;
            overflow-y: auto;
        }
        .log-entry {
            margin-bottom: 15px;
            padding: 15px;
            background: #1e1e1e;
            border-radius: 6px;
            border-left: 4px solid #007acc;
        }
        .log-entry.error {
            border-left-color: #f44336;
        }
        .log-entry.warning {
            border-left-color: #ff9800;
        }
        .log-entry.info {
            border-left-color: #4caf50;
        }
        .log-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            font-weight: bold;
        }
        .log-level {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            text-transform: uppercase;
        }
        .log-level.error {
            background: #f44336;
            color: white;
        }
        .log-level.warning {
            background: #ff9800;
            color: white;
        }
        .log-level.info {
            background: #4caf50;
            color: white;
        }
        .log-timestamp {
            color: #888;
            font-size: 12px;
        }
        .log-content {
            background: #0d1117;
            padding: 10px;
            border-radius: 4px;
            margin-top: 10px;
            overflow-x: auto;
        }
        .log-content pre {
            margin: 0;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        .request-id {
            color: #9cdcfe;
            font-weight: bold;
        }
        .execution-time {
            color: #4ec9b0;
        }
        .filter-tags {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 10px;
        }
        .filter-tag {
            padding: 4px 8px;
            background: #3c3c3c;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .filter-tag:hover {
            background: #007acc;
        }
        .filter-tag.active {
            background: #007acc;
        }
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        .stat-card {
            background: #2d2d30;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }
        .stat-number {
            font-size: 2em;
            font-weight: bold;
            color: #9cdcfe;
        }
        .stat-label {
            color: #888;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔍 消息接口日志查看器</h1>
        
        <div class="stats">
            <div class="stat-card">
                <div class="stat-number" id="totalLogs">0</div>
                <div class="stat-label">总日志数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="successCount">0</div>
                <div class="stat-label">成功请求</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="errorCount">0</div>
                <div class="stat-label">错误请求</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="avgTime">0ms</div>
                <div class="stat-label">平均响应时间</div>
            </div>
        </div>
        
        <div class="controls">
            <div class="control-group">
                <label>日志级别</label>
                <select id="levelFilter">
                    <option value="">全部级别</option>
                    <option value="info">信息</option>
                    <option value="warning">警告</option>
                    <option value="error">错误</option>
                </select>
            </div>
            
            <div class="control-group">
                <label>请求ID</label>
                <input type="text" id="requestIdFilter" placeholder="输入请求ID进行筛选">
            </div>
            
            <div class="control-group">
                <label>时间范围</label>
                <input type="datetime-local" id="startTime">
            </div>
            
            <div class="control-group">
                <label>至</label>
                <input type="datetime-local" id="endTime">
            </div>
            
            <div class="control-group">
                <label>&nbsp;</label>
                <button onclick="refreshLogs()">🔄 刷新日志</button>
            </div>
            
            <div class="control-group">
                <label>&nbsp;</label>
                <button onclick="clearFilters()">🧹 清除筛选</button>
            </div>
        </div>
        
        <div class="log-container" id="logContainer">
            <div style="text-align: center; color: #888; padding: 40px;">
                点击"刷新日志"按钮开始查看日志
            </div>
        </div>
    </div>

    <script>
        let allLogs = [];
        let filteredLogs = [];
        
        // 设置默认时间范围（最近24小时）
        function setDefaultTimeRange() {
            const now = new Date();
            const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
            
            document.getElementById('startTime').value = yesterday.toISOString().slice(0, 16);
            document.getElementById('endTime').value = now.toISOString().slice(0, 16);
        }
        
        // 页面加载时设置默认时间
        setDefaultTimeRange();
        
        // 刷新日志
        async function refreshLogs() {
            const button = event.target;
            button.disabled = true;
            button.textContent = '加载中...';
            
            try {
                // 这里应该调用您的API来获取日志
                // 由于这是前端演示，我们使用模拟数据
                await simulateLogFetch();
                applyFilters();
                updateStats();
            } catch (error) {
                console.error('获取日志失败:', error);
                alert('获取日志失败: ' + error.message);
            } finally {
                button.disabled = false;
                button.textContent = '🔄 刷新日志';
            }
        }
        
        // 模拟获取日志数据
        async function simulateLogFetch() {
            // 在实际使用中，这里应该调用您的后端API
            // 例如: const response = await fetch('/api/logs/message');
            
            // 模拟数据
            allLogs = [
                {
                    level: 'info',
                    message: '[消息接口] 开始处理请求',
                    timestamp: new Date().toISOString(),
                    data: {
                        request_id: 'msg_64f8a1b2c3d4e',
                        method: 'POST',
                        url: '/api/msg/send',
                        ip: '127.0.0.1',
                        user_agent: 'Mozilla/5.0...',
                        timestamp: '2025-08-26 11:30:00'
                    }
                },
                {
                    level: 'info',
                    message: '[消息接口] 接收到请求参数',
                    timestamp: new Date(Date.now() - 1000).toISOString(),
                    data: {
                        request_id: 'msg_64f8a1b2c3d4e',
                        params: {
                            yourname: '张三',
                            youremail: 'zhangsan@example.com',
                            theme: '测试消息',
                            yourmessage: '这是一条测试消息'
                        }
                    }
                },
                {
                    level: 'info',
                    message: '[消息接口] 消息保存成功',
                    timestamp: new Date(Date.now() - 500).toISOString(),
                    data: {
                        request_id: 'msg_64f8a1b2c3d4e',
                        msg_id: 123,
                        execution_time_ms: 45.67,
                        msg_data: {
                            yourname: '张三',
                            youremail: 'zhangsan@example.com',
                            theme: '测试消息',
                            yourmessage: '这是一条测试消息',
                            createtime: 1693020600,
                            status: 0
                        }
                    }
                }
            ];
            
            filteredLogs = [...allLogs];
        }
        
        // 应用筛选条件
        function applyFilters() {
            const levelFilter = document.getElementById('levelFilter').value;
            const requestIdFilter = document.getElementById('requestIdFilter').value;
            const startTime = document.getElementById('startTime').value;
            const endTime = document.getElementById('endTime').value;
            
            filteredLogs = allLogs.filter(log => {
                // 级别筛选
                if (levelFilter && log.level !== levelFilter) return false;
                
                // 请求ID筛选
                if (requestIdFilter && !log.data?.request_id?.includes(requestIdFilter)) return false;
                
                // 时间范围筛选
                if (startTime && new Date(log.timestamp) < new Date(startTime)) return false;
                if (endTime && new Date(log.timestamp) > new Date(endTime)) return false;
                
                return true;
            });
            
            displayLogs();
        }
        
        // 显示日志
        function displayLogs() {
            const container = document.getElementById('logContainer');
            
            if (filteredLogs.length === 0) {
                container.innerHTML = '<div style="text-align: center; color: #888; padding: 40px;">没有找到匹配的日志</div>';
                return;
            }
            
            container.innerHTML = filteredLogs.map(log => `
                <div class="log-entry ${log.level}">
                    <div class="log-header">
                        <span class="log-level ${log.level}">${log.level}</span>
                        <span class="log-timestamp">${formatTimestamp(log.timestamp)}</span>
                    </div>
                    <div class="log-content">
                        <pre>${log.message}</pre>
                        ${formatLogData(log.data)}
                    </div>
                </div>
            `).join('');
        }
        
        // 格式化日志数据
        function formatLogData(data) {
            if (!data) return '';
            
            let html = '<div style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #3c3c3c;">';
            
            // 特殊字段高亮显示
            if (data.request_id) {
                html += `<div><strong>请求ID:</strong> <span class="request-id">${data.request_id}</span></div>`;
            }
            
            if (data.execution_time_ms) {
                html += `<div><strong>执行时间:</strong> <span class="execution-time">${data.execution_time_ms}ms</span></div>`;
            }
            
            if (data.msg_id) {
                html += `<div><strong>消息ID:</strong> ${data.msg_id}</div>`;
            }
            
            // 其他数据
            Object.keys(data).forEach(key => {
                if (!['request_id', 'execution_time_ms', 'msg_id'].includes(key)) {
                    const value = typeof data[key] === 'object' ? JSON.stringify(data[key], null, 2) : data[key];
                    html += `<div><strong>${key}:</strong> <pre style="display: inline; margin: 0;">${value}</pre></div>`;
                }
            });
            
            html += '</div>';
            return html;
        }
        
        // 格式化时间戳
        function formatTimestamp(timestamp) {
            const date = new Date(timestamp);
            return date.toLocaleString('zh-CN');
        }
        
        // 更新统计信息
        function updateStats() {
            const totalLogs = allLogs.length;
            const successCount = allLogs.filter(log => log.message.includes('成功')).length;
            const errorCount = allLogs.filter(log => log.level === 'error').length;
            
            // 计算平均响应时间
            const executionTimes = allLogs
                .filter(log => log.data?.execution_time_ms)
                .map(log => log.data.execution_time_ms);
            
            const avgTime = executionTimes.length > 0 
                ? Math.round(executionTimes.reduce((a, b) => a + b, 0) / executionTimes.length)
                : 0;
            
            document.getElementById('totalLogs').textContent = totalLogs;
            document.getElementById('successCount').textContent = successCount;
            document.getElementById('errorCount').textContent = errorCount;
            document.getElementById('avgTime').textContent = avgTime + 'ms';
        }
        
        // 清除筛选条件
        function clearFilters() {
            document.getElementById('levelFilter').value = '';
            document.getElementById('requestIdFilter').value = '';
            setDefaultTimeRange();
            applyFilters();
        }
        
        // 绑定筛选器事件
        document.getElementById('levelFilter').addEventListener('change', applyFilters);
        document.getElementById('requestIdFilter').addEventListener('input', applyFilters);
        document.getElementById('startTime').addEventListener('change', applyFilters);
        document.getElementById('endTime').addEventListener('change', applyFilters);
    </script>
</body>
</html>
